<template>
  <view class="container">
    <!-- 筛选栏 -->
    <view class="filter-bar">
      <view
          class="filter-item"
          :class="{active: filterType === 'all'}"
          @click="filterType = 'all'"
      >
        全部
      </view>
      <view
          class="filter-item"
          :class="{active: filterType === 'unripe'}"
          @click="filterType = 'unripe'"
      >
        未成熟
      </view>
      <view
          class="filter-item"
          :class="{active: filterType === 'half'}"
          @click="filterType = 'half'"
      >
        半成熟
      </view>
      <view
          class="filter-item"
          :class="{active: filterType === 'ripe'}"
          @click="filterType = 'ripe'"
      >
        成熟
      </view>
    </view>

    <!-- 瀑布流历史记录 -->
    <view class="waterfall" v-if="userStore.accessToken">
      <view
          v-for="(item, index) in filteredList"
          :key="index"
          class="history-card"
          @click="previewHistory(item)"
      >
        <image class="history-image" :src="item.imageUrl" mode="aspectFill"></image>
        <view class="history-info">
          <view class="ripeness-tag" :style="{background: getRipenessColor(item.ripeness)}">
            {{ item.ripeness }}% 成熟度
          </view>
          <view class="history-time">
            <uni-icons type="calendar" size="14" color="#999"></uni-icons>
            {{ item.detectTime }}
          </view>
        </view>
      </view>
    </view>

    <!-- 未登录提示 -->
    <view class="empty-state" v-if="!userStore.accessToken">
      <image class="empty-image" src="/static/empty.png" mode="aspectFit"></image>
      <view class="empty-text">请先登录查看历史记录</view>
      <button class="empty-btn" @click="goToLogin">去登录</button>
    </view>

    <!-- 空数据提示 -->
    <view class="empty-state" v-else-if="historyList.length === 0 && !loading">
      <image class="empty-image" src="/static/empty.png" mode="aspectFit"></image>
      <view class="empty-text">暂无图片记录</view>
      <button class="empty-btn" @click="goToIndex">去上传</button>
    </view>

    <!-- 加载更多提示 -->
    <view class="load-more" v-if="loading">
      <uni-load-more :status="hasMore ? 'loading' : 'noMore'" :icon-size="16"></uni-load-more>
    </view>
  </view>
</template>

<script>
import historyApi from '@/api/historyApi'
import { useUserStore } from '@/stores/user'

export default {
  data() {
    const userStore = useUserStore()
    return {
      historyList: [],
      loading: false,
      filterType: 'all', // all/unripe/half/ripe
	  hasMore: false,
      userStore
    }
  },
  computed: {
    filteredList() {
      if (this.filterType === 'all') return this.historyList
      if (this.filterType === 'unripe') return this.historyList.filter(item => item.ripeness < 30)
      if (this.filterType === 'half') return this.historyList.filter(item => item.ripeness >= 30 && item.ripeness < 70)
      return this.historyList.filter(item => item.ripeness >= 70)
    }
  },
  onLoad() {
    this.loadData()
  },
  onShow() {
    this.loadData()
  },
  onReachBottom() {
    this.loadData()
  },
  onPullDownRefresh() {
    this.historyList = []
    this.loadData()
    uni.stopPullDownRefresh()
  },
  methods: {
    async loadData() {
      if (this.loading) return
      this.loading = true
      try {
        const res = await historyApi.getHistory()
        this.historyList = res.data
      } finally {
        this.loading = false
      }
    },
    getRipenessColor(ripeness) {
      if (ripeness < 30) return '#FF4757' // 未成熟
      if (ripeness < 70) return '#FFA502' // 半成熟
      return '#2ED573' // 成熟
    },
    previewHistory(item) {
      uni.navigateTo({
        url: `/pages/history/detail?id=${item.id}`
      })
    },
    goToIndex() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    },
    goToLogin() {
      uni.navigateTo({
        url: '/pages/login/login'
      })
    }
  },
}
</script>

<style lang="scss">
@import '@/uni.scss';

.container {
  padding: 20rpx;
  background-color: $uni-bg-color-grey;
  min-height: 100vh;
}

.filter-bar {
  display: flex;
  margin-bottom: 30rpx;
  background-color: $uni-bg-color;
  border-radius: $uni-border-radius-lg;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.filter-item {
  flex: 1;
  text-align: center;
  font-size: $uni-font-size-base;
  color: $uni-text-color-grey;
  padding: 10rpx 0;
  position: relative;

  &.active {
    color: $uni-color-primary;
    font-weight: bold;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 60rpx;
      height: 4rpx;
      background-color: $uni-color-primary;
      border-radius: 2rpx;
    }
  }
}

.waterfall {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.history-card {
  background-color: $uni-bg-color;
  border-radius: $uni-border-radius-lg;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  transition: transform 0.2s;

  &:active {
    transform: scale(0.98);
  }
}

.history-image {
  width: 100%;
  height: 300rpx;
}

.history-info {
  padding: 20rpx;
}

.ripeness-tag {
  color: $uni-text-color-inverse;
  font-size: $uni-font-size-sm;
  padding: 6rpx 12rpx;
  border-radius: $uni-border-radius-sm;
  display: inline-block;
  margin-bottom: 10rpx;
}

.history-time {
  font-size: $uni-font-size-sm;
  color: $uni-text-color-grey;
  display: flex;
  align-items: center;

  .uni-icons {
    margin-right: 6rpx;
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100rpx 0;
}

.empty-image {
  width: 300rpx;
  height: 300rpx;
  margin-bottom: 30rpx;
  opacity: 0.6;
}

.empty-text {
  font-size: $uni-font-size-base;
  color: $uni-text-color-grey;
  margin-bottom: 30rpx;
}

.empty-btn {
  background-color: $uni-color-primary;
  color: $uni-text-color-inverse;
  width: 200rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: $uni-font-size-base;
  border-radius: $uni-border-radius-base;
}

.load-more {
  padding: 30rpx 0;
  text-align: center;
}
</style>
